<template>
  <div class="frame">
    <el-form  :model="ruleForm" status-icon :rules="rules"  ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="客户名称" prop="name">
    <el-input type="text" v-model="ruleForm.bname" autocomplete="off" id="bn"></el-input>
  </el-form-item>
  <el-form-item label="联系电话" prop="phone">
    <el-input type="text" v-model="ruleForm.bphone" autocomplete="off" id="bp"></el-input>
  </el-form-item>
  <el-form-item label="交易地址" prop="address">
    <el-input type="text" v-model="ruleForm.baddress" id="ba"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="updata()" id="btn">提交</el-button>
  </el-form-item>
</el-form>
  </div>
</template>
<script>
export default {
    name:'UpdateMes',
    data(){
        var check1 = (rule, value, callback) => {
        if (value=='') {
          return callback(new Error('客户昵称不能为空'));
        }else{
          callback()
        }
      };
      var check2 = (rule, value, callback) => {
        if (value == '') {
          callback(new Error('请输入联系电话'));
        } else {
          callback();
        }
      };
      var check3 = (rule, value, callback) => {
        if (value =='') {
          callback(new Error('请输入联系地址'));
        } else {
          callback();
        }
      };
      return {
        uid:this.$store.state.uid,
        ruleForm: {
          bname: '',
          bphone: '',
          baddress: '',
        },
        rules: {
          name: [
            { validator: check1, trigger: 'blur',required:true }
          ],
          phone: [
            { validator: check2, trigger: 'blur',required:true }
          ],
          address: [
            { validator: check3, trigger: 'blur' ,required:true}
          ]
        }
      };
    },
    methods: {
      async updata(){
            const id=this.uid;
            const name=this.ruleForm.bname;
            const phone=this.ruleForm.bphone;
            const address=this.ruleForm.baddress;
          if (name&&phone&&address) {
            await this.$axios.put("/api/tacitTradeInfo",{id,name,phone,address}).then(res =>{
               alert(res.data.msg)
              }).catch(error =>{
               // console.log('提交失败')
                //console.log(error )
              })
            }else{
                alert('请填写完整数据')
            }    
      },
      async getUser(){
        await this.$axios.get("/api/tacitTradeInfo",{
              params:{
                uid:this.uid
              }}).then(res =>{
                this.ruleForm.bphone=res.data.data.phone;
                this.ruleForm.bname=res.data.data.name;
                this.ruleForm.baddress=res.data.data.address;
              }).catch(error =>{
               // console.log('提交失败')
                //console.log(error )
              })
      }
    },
    computed:{
      
    },
    mounted(){
      this.getUser();
    }
}
</script>
<style lang="less" scoped>
  
    .frame{
    .el-form-item {
      .el-input {
        width: 200px;
      }
    }
    padding-left:200px ;
    padding-top:100px ;
  }
  
</style>
